<template>
  <van-popup
    v-model="showSelectTextFlag"
    position='bottom'
    :round="true"
    :overlay="selectType === 'edit'"
    @close="closeTextBox"
    :duration="0.2"
    :close-on-click-overlay="false"
    get-container="body">
      <!-- 关闭按钮 -->
      <img v-if="selectType === 'edit'" class="close-icon" @click="inputAccomplish" src="@/assets/images/text/ic_btm_gb.png" alt="">
      <!-- 关闭按钮 -->
      <div class="background-container">
        <!-- 文字输入框 -->
        <div
          v-show="selectType === 'edit'"
          class="textarea-container">
          <van-field
            v-model="messageText"
            rows="5"
            type="textarea"
            :autofocus="true"
            placeholder="请输入文字"
            style="min-heing: 50px"
          />
        </div>
        <!-- 文字输入框 -->

        <!-- 头部导航栏 -->
        <div class="header-content" :class="{
          'header-content-border': selectType && selectType !== 'edit'
        }">
          <!-- tab栏 -->
          <div class="tab-content">
            <div
              class="operation-item"
              :class="{
                'operation-item-active': selectType === 'edit'
              }"
              @click="handleTab('edit')">
              <img class="operation-item-icon" src="@/assets/images/text/ic_btn_keyboard.png" alt="">
            </div>
            <div
              class="operation-item"
              :class="{
                'operation-item-active': selectType === 'font'
              }"
              @click="handleTab('font')">
              <img class="operation-item-icon" src="@/assets/images/text/ic_btn_fonts.png" alt="">
            </div>
            <div
              class="operation-item"
              :class="{
                'operation-item-active': selectType === 'color'
              }"
              @click="handleTab('color')">
              <img class="operation-item-icon" src="@/assets/images/text/ic_btn_color.png" alt="">
            </div>
            <div
              class="operation-item"
              :class="{
                'operation-item-active': selectType === 'style'
              }"
              @click="handleTab('style')">
              <img class="operation-item-icon" src="@/assets/images/text/ic_btn_adjustment.png" alt="">
            </div>
            <div v-if="selectType === 'edit'" @click="messageText = ''" class="operation-item">
              <span class="clear-btn">清空</span>
            </div>
            <div class="operation-item">
              <div class="operation-num">
                <div class="operation-icon-container" @click="decrease">
                  <img class="operation-item-icon" src="@/assets/images/text/ic_btn_decrease.png" alt="">
                </div>
                <div class="operation-icon-container">
                  <span class="font-size-num">{{ parseInt(startFontSize) }}</span>
                </div>
                <div class="operation-icon-container" @click="increase">
                  <img class="operation-item-icon" src="@/assets/images/text/ic_btn_increase.png" alt="">
                </div>
              </div>
            </div>
          </div>

          <!-- 商店和关闭弹窗 -->
          <div v-if="selectType !== 'edit'" class="operation-content">
            <img @click="handleClose" class="operation-icon" src="@/assets/images/ic_btn_fold.png" alt="">
          </div>
        </div>
        <!-- 头部导航栏 -->

        <!-- 字体选择 -->
        <FontFamily v-show="selectType === 'font'" />
        <!-- 字体选择 -->

        <!-- 颜色选择 -->
        <Color v-show="selectType === 'color'" />
        <!-- 颜色选择 -->

        <!-- 样式设置 -->
        <Style v-show="selectType === 'style'" />
        <!-- 样式设置 -->
      </div>
    </van-popup>
</template>

<script>
import {
  Slider
} from 'vant';
import FontFamily from './FontFamily.vue'
import Color from './Color.vue'
import Style from './Style.vue'
export default {
  components: {
    FontFamily,
    Color,
    Style,
    [Slider.name]: Slider,
  },
  data() {
    return {
      active: 0,
      overlayMask: false,
      selectType: '', // 操作的类型
      showSelectTextFlag: false,
      messageText: '默认文本',
      fontSize: 16, // 字体大小
      startFontSize: 16
    };
  },

  watch: {
    '$store.state.design.currentSelectionType': {
      immediate: true,
      handler(val, oldVal) {
        const footerContainerEl = document.querySelector('#footer-container');
        if (val === 'text') {
          footerContainerEl.style.zIndex = '2000';
          this.showSelectTextFlag = !this.showSelectTextFlag;
          const currentElement = this.$store.state.design.currentSelectionElement;
          if (!currentElement) {
            this.selectType = 'edit'; // 如果是底部点击打开的话，默认到编辑模式
          }
        } else if (oldVal === 'text') {
          this.showSelectTextFlag = false;
          // 关闭时重置信息
          this.messageText = '默认文本';
          this.fontSize = 16;
          this.startFontSize = 16;
        }
      } 
    },
    '$store.state.design.currentSelectionElement': {
      immediate: true,
      deep: true,
      handler(val, oldVal) {
        if (val && val.type === 'textbox') {
          this.messageText = val.text;
          this.fontSize = val.fontSize;
          this.startFontSize = val.fontSize * val.scaleX;
        }
      } 
    },
  },

  created() {
    console.log('激活activated');
  },

  methods: {
    // 关闭弹窗
    handleClose() {
      this.showSelectTextFlag = false;
      this.selectType = null;
      this.$emit('onClose', 'text');
      this.handAccountCanvas.discardActiveObject();
    },

    // 关闭弹窗回调
    closeTextBox() {
      this.showSelectTextFlag = false;
      this.selectType = null;
      this.$emit('onClose', 'text');
    },

    // 选择其他文字选项
    handleTab(type) {
      const messageText = this.messageText;
      const currentElement = this.$store.state.design.currentSelectionElement;
      if (!messageText) {
        return this.$toast({
          message: '请输入文字',
          position: 'center'
        });
      }
      this.selectType = type;
      if (!currentElement && messageText) {
        this.selectType = '';
        this.handAccountCanvas.addText({
          content: messageText,
          fontSize: this.fontSize
        })
      }
    },

    // 输入完成
    inputAccomplish() {
      const messageText = this.messageText;
      const currentElement = this.$store.state.design.currentSelectionElement;
      if (messageText && !currentElement) { // 正常添加文字
        this.selectType = '';
        this.handAccountCanvas.addText({
          content: messageText,
          fontSize: this.fontSize
        })
      } else if (messageText && currentElement) { // 更新文字
        this.selectType = '';
        this.handAccountCanvas.updateTextBox({
          type: 'text',
          content: messageText
        })
      } else {
        this.$toast({
          message: '请输入文字',
          position: 'center'
        });
      }
    },

    // 减小字体大小
    decrease() {
      const currentElement = this.$store.state.design.currentSelectionElement;
      let fontSize = this.fontSize -= 1;
      if (currentElement) { // 更新
        if (fontSize >= 8) {
          this.handAccountCanvas.updateTextBox({
            type: 'decreaseFontSize',
            content: fontSize
          }).then(() => {
            // this.fontSize = fontSize;
          })
        } else {
          this.fontSize = 8;
          this.$toast({
            message: '已经是最小字体了',
            position: 'center'
          });
        }
      } else { // 编辑的时候设置
        this.fontSize = this.fontSize;
        document.querySelector('textarea').style.fontSize = this.fontSize + 'px';
      }
    },

    // 增大字体大小
    increase() {
      const currentElement = this.$store.state.design.currentSelectionElement;
      let fontSize = this.fontSize += 1;
      if (currentElement) {
          this.handAccountCanvas.updateTextBox({
          type: 'increaseFontSize',
          content: fontSize
        })
      } else {
        this.fontSize = this.fontSize;
        document.querySelector('textarea').style.fontSize = this.fontSize + 'px';
      }
    }

  }
};
</script>

<style lang="less" scoped>
  .background-container{
    min-height: 78px;
    width: 100vw;
    display: flex;
    flex-direction: column;
    z-index: 99999;
    position: relative;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 4px 5px 1px #EEEEF3;

    .header-content{
      display: flex;
      width: 100vw;
      height: 68px;
      align-items: center;
      position: relative;
    }

    .header-content-border{
      &::before{
        display: block;
        content: '';
        position: absolute;
        bottom: 10px;
        width: 200%;
        left: 0;
        border-bottom: 1px solid #eaeaea;
        transform: scale(0.5);
        transform-origin: left bottom;
      }
    }

    .tab-content{
      display: flex;
      flex-wrap: wrap;
      padding: 0 18px;
      justify-content: space-between;
      align-items: center;
      flex: 1;

      .operation-item{

        .operation-item-icon{
          width: 24px;
          height: 24px;
          float: left;
        }

        .clear-btn{
          display: inline-block;
          text-align: center;
          font-weight: bold;
          height: 20px;
          width: 48px;
          font-size: 12px;
          line-height: 20px;
          border-radius: 11px;
          border: 2px solid #8da6ef;
          color: #8da6ef;
          background: #D6DFEB;
        }

        .operation-num{
          background: #D6DFEB;
          width: 80px;
          height: 30px;
          border-radius: 15px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 6px;

          .operation-item-icon{
            width: 20px;
            height: 20px;
            vertical-align: middle;
          }

          .font-size-num{
            font-weight: bold;
          }

          .operation-icon-container{
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
          }
        }
      }

      .operation-item-active{
        background: #D6DFEB;
        border-radius: 4px;
        padding: 4px;
      }
    }

    .operation-content{
      display: flex;
      width: 56px;
      justify-content: space-around;
      position: relative;

      &::before{
        display: block;
        content: "";
        height: 24px;
        width: 1px;
        background: #eaeaea;
        position: absolute;
        top: 0;
        left: 5px;
        bottom: 0;
        margin: auto;
      }

      .operation-icon{
        width: 20px;
        height: 20px;
        display: block;
      }
    }

    .textarea-container{
      height: 130px;
      padding-top: 10px;
    }
  }

  .van-popup{
    overflow: visible !important;
  }

  .close-icon{
    width: 40px;
    height: 45px;
    position: absolute;
    top: -32px;
    right: 10px;
    z-index: 9999;
  }
</style>
